$(function (){
    // 1. 抽取变量：这个js文件中出现多少次${"#....}，JS引擎就会去对应的页面做多少次元素查找。现在这样集中整合后，每种选择器只做一次，后面都是直接用变量
    var empDatagrid, empDatagridEditAndDel, empDialog, empForm;
    empDatagrid =  $('#emp_dg');
    empDatagridEditAndDel =$('#emp_dg_edit,#emp_dg_del');
    empDialog = $('#emp_dialog');
    empForm = $('#emp_form');

    //2. 统一管理方法,利用js对象
    var cmdFunc = {
        /*  新增按钮的逻辑 */
        add:function () {
        //TODO 可以同时调用多个方法吗
        empDialog.dialog("open");
        empDialog.dialog("setTitle", "新增");
        empForm.form("clear");
        $('#emp_roles').combobox('reload');

    },
        //保存新增员工时
        save:function (){
        //TODO 学习jquery的选择器
        var idVal = $('#emp_form [name="id"]').val();
        var url;
        if (idVal){
            url = '/employee_update'
        }else {
            url = '/employee_save';
        }
        //表单提交异步请求
        empForm.form('submit',{
            url: url,
            onSubmit:function (param) {
                var roleIds = $('#emp_roles').combobox('getValues');
                for (var i = 0; i < roleIds.length; i++) {
                    param['roles['+i+'].id'] = roleIds[i];
                }
            },
            success:function (data) {
                data = $.parseJSON(data);
                if (data.success){
                    $.messager.alert("温馨提示",data.msg,"info",function (){
                        //新增成功后关闭对话框
                        empDialog.dialog("close");
                        //刷新员工列表数据
                        empDatagrid.datagrid('load');
                    });
                }else {
                    $.messager.alert("温馨提示",data.msg,"warning");
                }
            }
        });
    },

        edit:function () {
        var rowData = empDatagrid.datagrid('getSelected');
        console.log(rowData)
        if (rowData){
            empDialog.dialog("open");
            empDialog.dialog("setTitle", "编辑");
            //TODO 学习前端js的对象新增属性和赋值操作
            rowData['dept.id'] = rowData.dept.id?rowData.dept.id:'';

            /*
            *   1. $.ajax的同步和异步的理解:
            *       因为js是单线程的，所以如下在查询出来html之前不应该执行
            *       后续 $('#emp_roles').combobox('setValues',empRoles)赋值操作
            *       所以我们这里是使用同步的ajax
            *       而ajax的get/post方法都是默认异步的，这里就不能使用
            *   2. 理解JSON字符串和js对象。
            *       例如html获取的是JSON字符串，只不过打印出来像数组形式的。
            *       而真正的js对象打印出来是可以对象.属性进行调用的。
            *   3. @ResponseBody后台就是将返回给客户端的对象转为JSON字符串
            *       而我们前端通过Ajax拿到JSON字符串时候，在大多数情况下是需要拿到对应的对象进行调用和显示的
            *       例如$('#emp_roles').combobox('setValues',empRoles)中，empRoles就是需要js对象而不是JSON字符串。
            *       前端就需要通过 $.parseJSON(JSON字符串);方法将JSON字符串转为js对象
            * */

            //根据员工id查询对应的角色信息
            var html = $.ajax({
                url: "role_queryByEid?eid="+rowData.id,
                async: false
            }).responseText;
            //JSON字符串转对象
            var empRoles = $.parseJSON(html);

            $('#emp_roles').combobox('setValues',empRoles);
            empForm.form("load",rowData);
        }else {
            $.messager.alert("温馨提示","请选中一条需要编辑的员工！","info");
        }
    },

        del:function () {
        var rowData = empDatagrid.datagrid('getSelected');
        if (rowData){
            $.messager.confirm('确认','您确认想要删除这名员工的信息吗？',function(r){
                if (r){
                    $.get(
                        '/employee_delete?id='+rowData.id,
                        function (data) {
                            if (data.success){
                                $.messager.alert("温馨提示",data.msg,"info");
                                empDatagrid.datagrid("reload");
                            }else {
                                $.messager.alert("温馨提示",data.msg,"info");
                            }
                        },
                        "json"
                    );
                }
            });
        }else {
            $.messager.alert("温馨提示","请选中一条需要离职的员工！","info");
        }

    },
        reload:function () {
        empDatagrid.datagrid('reload');
    },

        cancel:function () {
        empDialog.dialog("close");
    },

        searchBtn:function (){
        var keyVal = $("[name = 'keyWord']").val();
        console.log(keyVal)
        empDatagrid.datagrid('load',{
            keyWord:keyVal
        });
    }
    };

    //3. 对按钮进行统一的监听
    //TODO 元素的属性还是标签的意思？可以自己随意定义吗？系统的学习下JQuery吧 data方法是什么意思
    $('a[data-cmd]').on('click',function (){
        var cmd = $(this).data('cmd');
        if (cmd){
            cmdFunc[cmd]();
        }
    })

    /*员工信息表格的初始化*/
    empDatagrid.datagrid({
        url: "/employee_list",
        fit: true,
        fitColumns: true,
        rownumbers: true,
        pagination: true,
        singleSelect: true,
        toolbar:"#emp_dg_tb",
        pageList:[2,3,10,20,30,40,50],
        onClickRow:function (index, row) {
            if (!row.state){
                //TODO JQuery的多种选择器的学习
                empDatagridEditAndDel.linkbutton('disable');
            }else {
                empDatagridEditAndDel.linkbutton('enable');
            }
        },
        columns: [
            [
                {field: "username", title: "用户名", width: 1, align: 'center'},
                {field: "realname", title: "真实姓名", width: 1, align: 'center'},
                {field: "tel", title: "电话", width: 1, align: 'center'},
                {field: "email", title: "邮箱", width: 1, align: 'center'},
                {field: "dept", title: "部门id", width: 1, align: 'center',
                    formatter: function(value,row,index){
                        return value?value.name:"";
                    }},
                {field: "inputtime", title: "入职时间", width: 1, align: 'center'},
                {field: "state", title: "状态", width: 1, align: 'center',
                    formatter: function(value,row,index){
                        if (value){
                            // return "<p style='color: green;font-weight: bold'>在职</p>";为什么这样框会变大
                            return "<font style='color: blue;font-weight: bold'>在职</font>";
                        }else {
                            return "<font style='color: red;font-weight: bold'>离职</font>";
                        }
                    }},
                {field: "admin", title: "是否超级管理员", width: 1, align: 'center',
                    formatter: function(value,row,index){
                        if (value){
                            return  "<font style='color: red;font-weight: bold'>是</font>";
                        }else {
                            return  "<font style='color: blue;font-weight: bold'>否</font>";
                        }
                    }}
            ]
        ]
    });

    /*新增或更新编辑员工信息的对话框的初始化*/
    empDialog.dialog({
        width: 300,
        height: 300,
        closed: true,
        buttons: '#emp_dialog_bt'
    })

});
















